<!-- 模块说明 -->
<template>
    <div class="big">
        <div class="pic">
            <img src="../../img/photo.jpg" />
        </div>

        <div class="name">
            <span class="n1">小桔书店<img src="../../img/女(1).png"> </span>
            <span class="n2">湖南大学</span>
        </div>

        <div class="data">
            <div class="da1">
                <span>55</span>
                <span>出售</span>
            </div>
            <div class="da2">
                <span>7</span>
                <span>粉丝</span>
            </div>
        </div>
    </div>

    <div class="big">
        <div class="pic">
            <img src="../../img/bigyuan.jpg" />
        </div>

        <div class="name">
            <span class="n1">大远书店<img src="../../img/女(1).png"> </span>
            <span class="n2">湖南大学</span>
        </div>

        <div class="data">
            <div class="da1">
                <span>55</span>
                <span>出售</span>
            </div>
            <div class="da2">
                <span>7</span>
                <span>粉丝</span>
            </div>
        </div>
    </div>


    <div class="big">
        <div class="pic">
            <img src="../../img/myphoto.jpg" />
        </div>

        <div class="name">
            <span class="n1">大远书店<img src="../../img/女(1).png"> </span>
            <span class="n2">湖南大学</span>
        </div>

        <div class="data">
            <div class="da1">
                <span>55</span>
                <span>出售</span>
            </div>
            <div class="da2">
                <span>7</span>
                <span>粉丝</span>
            </div>
        </div>
       
    </div>
    <div class="big">
        <div class="pic">
            <img src="../../img/double.jpg" />
        </div>

        <div class="name">
            <span class="n1">大远书店<img src="../../img/女(1).png"> </span>
            <span class="n2">湖南大学</span>
        </div>

        <div class="data">
            <div class="da1">
                <span>55</span>
                <span>出售</span>
            </div>
            <div class="da2">
                <span>7</span>
                <span>粉丝</span>
            </div>
        </div>
    </div>
    <div class="big">
        <div class="pic">
            <img src="../../img/001.jpg" />
        </div>

        <div class="name">
            <span class="n1">大远书店<img src="../../img/女(1).png"> </span>
            <span class="n2">湖南大学</span>
        </div>

        <div class="data">
            <div class="da1">
                <span>55</span>
                <span>出售</span>
            </div>
            <div class="da2">
                <span>7</span>
                <span>粉丝</span>
            </div>
        </div>
    </div>
</template>

<script setup>
</script>
<style lang="scss" scoped>
.big {
    height: 60px;
    display: flex;
    align-items: center;
    border-bottom: 0.5px solid #999;
}

.big div {
    height: 45px;
}

.pic {
    width: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pic img {
    width: 45px;
    border-radius: 45px;
    text-align: center;
}

.name {
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.name img {
    width: 15px;
    vertical-align: middle;
    margin-left: 4px;
}

.data {
    flex: 1;
    display: flex;
    font-size: 12px;
}

.n1,
.n2 {
    line-height: 20px;
    padding-left: 8px;


}

.n1 {
    font-size: 12px;
}

.n2 {
    font-size: 10px;
    color: #555;
}

.da1,
.da2 {
    display: flex;
    width: 50%;
    flex-direction: column;
    text-align: center;
    line-height: 16px;
    justify-content: center;

}
</style>
